<template>
  <div class="month-follow-model">
    <title-bar ref="titlebar" :bar-title='titleText'></title-bar>
    <ECharts ref="lineBar" v-if="init" :options="option" eclass="echart" :resize="resize"></ECharts>
    <div class="explain" v-show="text_show">
      <p>1.一致部分数字越大，说明顾问录入的到访跟进和客户实际到访数匹配数越多。</p>
      <p>2.客服报表差异数字越大，说明顾问漏录入的到访跟进越多。</p>
      <p>3.顾问差异部分数字越大，说明顾问多录入的到访跟进越多。</p>
    </div>
  </div>
</template>
<script>
  import TitleBar from './title-bar'
  import ECharts from '../components/ECharts'
  import Q from 'q'

  require('echarts/lib/chart/bar')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/tooltip')

  export default {
    props: {
      dfData: {
        type: Object
      },
      calendar: {
        type: String,
        default:''
      },
    },
    watch: {
      dfData () {
          this.refactData()
      },
      calendar(){
        this.refactTitle()
      }
    },
    components: {
      TitleBar,
      ECharts
    },
    methods: {
      refactData () {
        this.init = false
        this.option.yAxis.data = this.dfData.yAxis
        this.option.series[2].data = this.dfData.series.a
        this.option.series[0].data = this.dfData.series.b
        this.option.series[1].data = this.dfData.series.c
        this.option.series[0].label.normal.formatter = (params) => {
          if(params.value === 0){
            return ''
          }else{
            return params.value
          }
        }
        this.option.series[1].label.normal.formatter = (params) => {
          if(params.value === 0){
            return ''
          }else{
            return params.value
          }
        }
        this.option.series[2].label.normal.formatter = (params) => {
          if(params.value === 0){
            return ''
          }else{
            return params.value
          }
        }
        setTimeout(() => {
          this.init = true
          this.text_show = true
        })
      },
      refactTitle (){
        switch (this.calendar){
          case '5':
            this.titleText = '到访数据对比 (上月)'
            break;
          case '7':
            this.titleText = '到访数据对比 (上周)'
            break;
          default:
            this.titleText = '到访数据对比 (本月)'
        }
      }
    },

    data () {
      return {
        init: false,
        resize:false,
        titleText:'到访数据对比 (本月)',
//        data_show:true,
        text_show:false,
        option: {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['一致部分','客服报表差异','顾问差异部分'],
//            height:50,
            padding:[
              25,  // 上
              0, // 右
              0,  // 下
              0, // 左
            ]
          },
          grid:{
//            top:25,
            bottom:25
          },
          xAxis:  {
            type: 'value',
            axisLabel: {
//              padding:[20, 4, 5, 6]
            }
          },
          yAxis: {
            type: 'category',
            data: [],
            axisLabel: {
              formatter: '{value}',
              interval:0,
//              rotate:40,
              margin:0
            },
            offset:5
          },
          series: [
            {
              name: '一致部分',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              itemStyle:{
                normal:{
                  color:'#aace78'
                }
              },
              data: []
            },
            {
              name: '客服报表差异',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              itemStyle:{
                normal:{
                  color:'#70c8f4'
                }
              },
              data: []
            },
            {
              name: '顾问差异部分',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              itemStyle:{
                normal:{
                  color:'#89e3d8'
                }
              },
              data: []
            }
          ]
        }
      }
    },
    mounted () {

    }
  }
</script>
<style lang="less">
  .month-follow-model {
    min-height: 200px;
    .echart {
      min-height: 300px;
      width: 106%;
      margin-left: 5px;
    }
  }

  .explain{
    font-size: 12px;
    margin-left: 11%;
    padding-bottom: 0.5rem;
    color: #999999;
  }
</style>
